<template>
  <div class="comment_box m_h m_flex m_fdc">
    <div class="comment_title m_flex m_faic m_fs16">
      <span class="m_fw">全部评论</span>
      <span class="m_f1 m_fs14">{{video.commentCount}}</span>
      <van-icon name="cross" class="close" @click="close"/>
    </div>
    <div class="comment_content m_f1">
      <div v-if="comments.length > 0">
        <div  class="comment_item m_flex" v-for="item in comments" :key="item.id">
          <img v-if="item.avatarUrl" :src="ip+item.avatarUrl" class="avatar m_br50p">
          <div v-else class="m_br50p m_tac m_fs16 m_fw avatar avatar2">{{item.username.slice(0,1)}}</div>
          <div class="m_f1">
            <div class="username m_fs14">{{item.nickname?item.nickname:item.username}}</div>
            <div class="time m_fs12">{{item.createAt}}</div>
            <div class="content m_fs16">{{item.content}}</div>
          </div>
          <div class="like m_flex m_fdc m_faic">
            <van-icon :name="isLiked(item.id)?'like':'like-o'" 
              @click="doLikeComment(item,isLiked(item.id))"/>
            <span class="m_fs12">{{item.likeCount}}</span>
          </div>
        </div>
        <van-loading v-if="isLoading" size="28" class="m_tac"/>
      </div>
      <div v-else-if="comments.length == 0" class="empty m_tac m_fs15">
        率先抢个沙发~
      </div>
    </div>
    <div class="comment_send m_flex m_faic">
      <van-field v-model="content" rows="1" autosize type="textarea" placeholder="发条有爱的评论吧"
        class="m_fs15 m_f1"/>
      <van-button v-show="content" class="send_btn" color="#008080" @click="doComment"
        type="small">发送</van-button>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  props: {
    video: {type:Object, required:true, default:null}
  },
  data(){
    return {
      comments: [],
      commentlikes: [],
      content: '',
      isLoading: true
    }
  },
  computed: {
    ...mapState(['ip']),
  },
  watch: {
    video: {
      handler(newVideo, oldVideo) {
        this.video = newVideo
        this.comments = []
        this.commentlikes = []
        this.isLoading = true
        this.getComments(this.video.id)
        this.getCommentlikes(this.video.id)
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },

  },
  methods: {
    // 关闭评论
    close(){
      this.content = ''
      this.$emit('hideCommnet')
    },
    // 点赞/取消点赞评论
    doLikeComment(comment,liked){
      // 没有登录
      if(!localStorage.getItem('token')){
        this.$dialog.confirm({
          title: '温馨提示',
          message: '需要登录后才可以哦',
          confirmButtonText: '去登录',
          confirmButtonColor: '#008080',
        }).then(()=>{
          this.$router.push('/login')
        }).catch(()=>{})
        return
      }
      // 原来赞过，现在取消点赞
      if(liked){
        this.axios.post(`/unlike/comment/${comment.id}`).then(res=>{
          if(res.code==0){
            this.commentlikes = this.commentlikes.filter(x=>x.id != comment.id)
            comment.likeCount--
          }else{
            this.$toast('取消点赞失败')
          }
        })
      }
      // 原来没有点赞，现在点赞
      else{
        this.axios.post(`/like/comment/${comment.id}`).then(res=>{
          if(res.code==0){
            this.commentlikes.push({id:comment.id})
            comment.likeCount++
          }else{
            this.$toast('点赞失败')
          }
        })
      }
    },
    // 发表评论
    doComment(){
      // 评论内容为空
      if(this.content.trim() === ''){
        return this.$toast('评论空空哦')
      }
      // 没有登录
      if(!localStorage.getItem('token')){
        this.$dialog.confirm({
          title: '温馨提示',
          message: '需要登录后才可以哦',
          confirmButtonText: '去登录',
          confirmButtonColor: '#008080',
        }).then(()=>{
          this.$router.push('/login')
        }).catch(()=>{})
        return
      }
      // 发表
      this.axios.post('/comment',{
        videoId: this.video.id,
        content: this.content
      }).then(res=>{
        if(res.code==0){
          this.content = ''
          this.comments.unshift(res.comment)
          this.video.commentCount++
          this.$toast('发表成功')
        }else{
          this.$toast('发表失败')
        }
      })
    },
    // 获取评论
    getComments(videoId){
      this.axios.get(`/api/comments/${videoId}`).then(res=>{
        this.isLoading = false
        if(res.code==0){
          this.comments = res.comments
        }else{
          this.$toast('获取评论失败')
        }
      })
    },
    // 获取用户赞过的评论
    getCommentlikes(videoId){
      if(!localStorage.getItem('token')) return
      this.axios.get('/commentlikes?videoId='+videoId).then(res=>{
        if(res.code==0){
          this.commentlikes = res.dt.commentlikes
        }else{
          this.$toast('获取赞过的评论失败')
        }
      })
    },
    // 是否赞过此评论
    isLiked(id){
      return this.commentlikes.some(x=>x.id==id)
    }
  },
}
</script>

<style lang="scss" scoped>
.comment_box{
  color: #282828;
  .comment_title{
    padding: 0 24px;
    gap: 5px;
    height: 50px;
    .close{ color: #c0c0c0;}
  }
  .comment_content{
    padding: 0 24px;
    height: 0;
    overflow: scroll;
    &::-webkit-scrollbar{ display: none;}
    .comment_item{
      margin-bottom: 10px;
      gap: 8px;
      .avatar{
        width: 35px;
        height: 35px;
        border: 2px solid #eee;
        line-height: 35px;
        color: #fff;
        &.avatar2{
          background: #008080;
        }
      }
      .username{ color: #767676;}
      .time{ color: #767676; padding-top: 4px;}
      .like{color: #767676;}
      .content{ 
        line-height: 24px;
        padding: 10px 0;
      }
    }
    .empty{
      padding-top: 40%;
      color: #ccc;
    }
  }
  .comment_send{
    padding-right: 18px;
    line-height: 45px;
    border-top: 1px solid #efefef;
  }
}
</style>